<template>
	<el-header>
		<div>
			<img src="../assets/logo.png" alt="数据库查询系统">
			<span>数据库查询系统</span>
			<el-select v-model="schema" placeholder="请选择" @change="changeDb">
				<el-option
					v-for="item in resourceList"
					:key="item.id"
					:label="item.text"
					:value="item.id">
				</el-option>
			</el-select>
		</div>
	</el-header>
</template>

<script>
	export default {
		data() {
			return {
				resourceList: [],
				schema: ""
			}
		},
		methods: {
			async getResource() {
				const result = await this.$http.get('/db/configs');
				this.resourceList = result.data;
				if(this.resourceList.length > 0){
					//默认的第一条数据 设置为下拉列表的id
					const defaultValue = this.resourceList[0].id;
					this.schema = defaultValue;
					//触发change
					this.$store.commit('changeDbInstance', defaultValue);
				}
			},
			changeDb: function (data) {
				this.$store.commit('changeDbInstance', data);
			}
		},
		created() {
			this.getResource();
		}
	}
</script>
<style lang="less" scoped>
	.el-header{
		background-color: #2b4b6b;
		display: flex;
		justify-content: space-between;
		padding-left: 10px;
		align-items: center;
		color: #fff;
		> div {
			display: flex;
			align-items: center;
			img{width: 30px; height: 30px;}
			span{margin-left: 15px;}
		}
		.el-select{margin-left: 15px;}
	}
</style>
